<template>
    <div>
    <el-dialog
        title="添加目录"
         :visible.sync="isDlgShow"
        v-on:close="closeHandler()"
        width="60%"
        center>
        <span>
            <el-row>
                <el-col :span="3">
                        <div>*商品目录:</div>
                    </el-col>
                 <el-col :span="21">
                    <el-input
                        placeholder="请输入内容"
                        v-model="inputtxt"
                        clearable>
                    </el-input>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                        <div>*所属根目录:</div>
                    </el-col>
                 <el-col :span="21">
                    <el-cascader
                        placeholder="请选择：可搜索"
                        :options="options"
                        change-on-select
                        filterable
                        @change="handleItemChange"
                        clearable
                    ></el-cascader>
                 </el-col>
                 
            </el-row>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addZip()">提交</el-button>
            <el-button @click="closeHandler()">取消</el-button>
        </span>
    </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isDlgShow: true,
            inputtxt: "",
            parentId: null,
            admin: this.$persistence.get("admin"),
            options: this.$persistence.get("category") ? this.$persistence.get("category") : []
        };
    },
    methods: {
        closeHandler() {
            this.isDlgShow = false;
            this.$emit("closeHdl");
        },
        handleItemChange(value) {
            this.parentId = parseInt(value[value.length - 1]);
        },
        addZip() {
            if (this.inputtxt == "") {
                this.$message({
                    message: "请输入目录名",
                    type: "warning"
                });
                return;
            }
            this.$axiosPost(
                "/AdminService/saveCategory",
                {
                    session: this.admin.session,
                    category: { name: this.inputtxt, parentId: this.parentId }
                },
                response => {
                    this.$message({
                        message: "添加成功",
                        type: "warning"
                    });
                    var categoryData = this.$findCategory([response.data], this.options);
                    this.$persistence.put("category", categoryData);
                    this.$emit("addZipHdl");
                    this.isDlgShow = false;
                },
                error => {
                    this.$message.error("添加失败，请检查网络环境！");
                }
            );
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>